<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看</title>
    <#assign base=request.contextPath  />
    <base id="base" href="${base}">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${base}/static/win10/component/layui/css/layui.css" media="all">
    <script src="${base}/static/win10/js/jquery-1.8.3.min.js?t=1"></script>
    <script src="${base}/static/win10/js/zhang.js?t=1"></script>
    <link rel="stylesheet" href="${base}/static/win10/css/ztree/metroStyle/metroStyle.css" type="text/css">
    <link rel="stylesheet" href="${base}/static/win10/css/ztree/demo.css?t=2" type="text/css">
    <script type="text/javascript" src="${base}/static/win10/js/jquery.ztree.all.js"></script>
    <script>
        var base =  "${base}";
    </script>
</head>
<body>
<br>
<form class="layui-form " action="">
    <input type="hidden" id="id" name="id" value="${role.id!}" >
    <div class="layui-form-item">
        <label class="layui-form-label">角色名</label>
        <div class="layui-input-block">
            <input type="text" id="roleName" readonly name="roleName" value="${role.roleName!}"  autocomplete="off" placeholder="请输入角色名"
                   class="layui-input">
        </div>
    </div> <#--
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
            <input type="text" id="createTime" readonly name="createTime"    autocomplete="off" placeholder="请输入创建时间"
                   class="layui-input">
        </div>
    </div>-->
    <div class="layui-form-item">
        <label class="layui-form-label">角色描述</label>
        <div class="layui-input-block">
            <input type="text" id="details" readonly name="details" value="${role.details!}"  autocomplete="off" placeholder="请输入角色描述"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">菜单权限</label>
        <div class="layui-input-block">
            <ul id="tree" class="ztree" style="height: 500px;width: 98%"></ul>
        </div>
    </div>

</form>

<script src="${base}/static/win10/component/layui/layui.js?t=1"></script>
<script>
    layui.use(['form', 'layer','util'], function() {
        var util = layui.util;
        var form = layui.form
                , layer = layui.layer;


        var treeObj;
        var setting = {
            async: {
                enable: true,
                url: base + "/star/role/admin/finPermissionAjax",
                dataFilter: ajaxDataFilter
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                    rootPId: 0
                }
            },
            view: {
                expandSpeed: "normal"
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            }
        };
        initTree();


        function initTree() {
            treeObj =  $.fn.zTree.init($("#tree"), setting  );
            setTimeout(function () {
                checkZtree(treeObj);
                redonlyZtree("tree")
            },500)

        }

        function checkZtree(treeObj){
            var oldIds="${permissionIds}";
            var oldIdsarr=oldIds.split(",");
            for (var i = 0; i < oldIdsarr.length; i++) {
                var node = treeObj.getNodeByParam("id", oldIdsarr[i]);
                if(node!=null){
                    treeObj.checkNode(node, true, false);//指定选中ID的节点
                }

            }
        }

        /**
         * 解析 正常响应的数据
         * @param treeId
         * @param parentNode
         * @param responseData
         * @returns {*}
         */
        function ajaxDataFilter(treeId, parentNode, responseData) {
            if(responseData.code===200){
                return responseData.data;
            }else{
                layer.msg(responseData.msg)
            }
        }
        var createTime="${role.createTime!}";
    $("#createTime").val(util.toDateString(createTime))







    });

</script>
</body>
</html>